<template>
    <div class="comparison-container">
        <h2>数字大小比较器</h2>

        <!-- 输入区域 -->
        <div class="input-group">
            <div class="input-item">
                <label for="num1">第一个数字：</label>
                <!-- 只允许输入数字，v-model绑定第一个数字 -->
                <input
                    type="number"
                    id="num1"
                    v-model.number="num1"
                    placeholder="请输入数字"
                >
            </div>

            <div class="input-item">
                <label for="num2">第二个数字：</label>
                <!-- 只允许输入数字，v-model绑定第二个数字 -->
                <input
                    type="number"
                    id="num2"
                    v-model.number="num2"
                    placeholder="请输入数字"
                >
            </div>
        </div>

        <!-- 比较按钮 -->
        <button
            class="compare-btn"
            @click="compareNumbers"
            :disabled="!isValidInput"
        >
            比较大小
        </button>

        <!-- 结果显示区域 -->
        <div class="result" v-if="showResult">
            <p>比较结果：{{ resultText }}</p>
        </div>
    </div>
</template>

<script setup>
import {ref, computed} from 'vue';

// 响应式变量存储输入的两个数字（初始为null）
const num1 = ref(null);
const num2 = ref(null);

// 存储比较结果文本和是否显示结果的状态
const resultText = ref('');
const showResult = ref(false);

// 计算属性：判断输入是否有效（两个都为数字）
const isValidInput = computed(() => {
    // 检查是否为有效数字（排除null、undefined和非数字）
    return typeof num1.value === 'number' && !isNaN(num1.value) &&
        typeof num2.value === 'number' && !isNaN(num2.value);
});

// 比较两个数字大小的方法
const compareNumbers = () => {
    // 只有输入有效时才执行比较
    if (isValidInput.value) {
        if (num1.value > num2.value) {
            resultText.value = `${num1.value} 大于 ${num2.value}`;
        } else if (num1.value < num2.value) {
            resultText.value = `${num1.value} 小于 ${num2.value}`;
        } else {
            resultText.value = `${num1.value} 等于 ${num2.value}`;
        }
        // 显示结果区域
        showResult.value = true;
    }
};
</script>

<style scoped>
.comparison-container {
    max-width: 600px;
    margin: 50px auto;
    padding: 30px;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h2 {
    color: #333;
    margin-bottom: 30px;
}

.input-group {
    display: flex;
    flex-direction: column; /* 改为列布局，使两个输入项垂直排列 */
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.input-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

input {
    width: 150px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

input:focus {
    outline: none;
    border-color: #42b983; /* Vue标志性绿色 */
    box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
}


.compare-btn {
    padding: 10px 20px;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.compare-btn:hover:enabled {
    background-color: #359e75;
}

.compare-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.result {
    margin-top: 20px;
    padding: 15px;
    border-radius: 4px;
    background-color: #f5f5f5;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result p {
    font-size: 18px;
    color: #333;
    margin: 0;
}
</style>